<template>
  <view class="filter-item">
    <text class="font-item-text">{{ title }}</text>
    <picker
      mode="multiSelector"
      :range="pickerRanges"
      @change="bindPickerChange"
      :value="pickerValues"
    >
      <view class="uni-input">
        <text class="range-text">{{ flag ? formattedSelection : '' }}</text>
        <uni-icons type="arrowright" size="20" class="icon"></uni-icons>
      </view>
    </picker>
  </view>
</template>

<script lang="ts" setup>
import { computed, watch } from 'vue'
// 定义 props 接口
interface PickerProps {
  types: string
  title: string
  pickerValues: number[]
  flag: boolean
  pickerRanges: [][]
  bindPickerChange: (e: Event) => void
  changeFlag: Function
}

// 使用 defineProps 定义 props
const props = defineProps<PickerProps>()
console.log(props.types)

// 格式化选择内容
const formattedSelection = computed(() => {
  const [index1, index2] = props.pickerValues
  if (props.types == 'ages') {
    return `${props.pickerRanges[0][index1 - 20]} ~ ${props.pickerRanges[1][index2 - 20]}`
  } else {
    return `${props.pickerRanges[0][index1]} ~ ${props.pickerRanges[1][index2]}`
  }
})
watch(
  () => props.pickerValues,
  () => {
    if (props.pickerValues[0] != undefined || props.pickerValues[1] != undefined) {
      props.changeFlag()
    }
  },
)
</script>

<style lang="scss" scoped>
.filter-item {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  cursor: pointer;
  margin-bottom: 20px;
}

.font-item-text {
  color: #6e7073;
  font-size: 3vw;
}

.uni-input {
  display: flex;
  align-items: center;
}

.icon {
  color: #ccc;
  margin-left: 1vw;
}
</style>
